<template>
    <div class="box">
        <div class="darg" ref="customerService" @touchmove="touchmoveHandle('customerService', $event)"
            @touchstart="touchstartHandle('customerService', $event)">
            <i class="iconfont icon-envelope"></i>
        </div>
    </div>
</template>
  
<script>
export default {
    name: "myDarg",
    data() {
        return {
            touch: {
                initialPosition: {},
                movePostion: {},
            },
            element: {
                initialPosition: {},
                movePostion: {},
            },
        };
    },
    methods: {
        touchstartHandle(refName, e) {
            // console.log(e)
            // 触摸开始
            let touchTarget = e.targetTouches[0];
            // 记录触摸点的坐标（初始位置）
            this.touch.initialPosition = {
                x: touchTarget.clientX,
                y: touchTarget.clientY,
            };
            // 记录需要移动的元素坐标（初始位置）
            this.element.initialPosition = {
                x: this.$refs[refName].offsetLeft,
                y: this.$refs[refName].offsetTop,
            };
        },
        touchmoveHandle(refName, e) {
            e.preventDefault();
            let touchTarget = e.targetTouches[0];
            // 根据初始touch位置计算移动距离:元素移动位置=元素初始位置+(光标移动后的位置-光标点击时的初始位置)
            let X =
                this.element.initialPosition.x +
                (touchTarget.clientX - this.touch.initialPosition.x);
            let Y =
                this.element.initialPosition.y +
                (touchTarget.clientY - this.touch.initialPosition.y);
            // 限制可移动距离，不超出可视区域
            let maxWidth = innerWidth - this.$refs[refName].offsetWidth;
            let maxHeight = innerHeight - this.$refs[refName].offsetHeight;
            X = X <= 0 ? 0 : X >= maxWidth ? maxWidth : X;
            Y = Y <= 0 ? 0 : Y >= maxHeight ? maxHeight : Y;
            // console.log(X,Y)

            // 移动元素
            this.$refs[refName].style.left = X + "px";
            this.$refs[refName].style.top = Y + "px";
        },
    },
};
</script>
  
<style lang="scss" scoped>
.darg {
    width: 120px;
    height: 120px;
    background-color: #007aff;
    border-radius: 50%;
    color: #ffff;
    text-align: center;
    line-height: 120px;
    position: fixed;
    bottom: 400px;
    right: 0;

    i {
        font-size: 60px;
    }
}
</style>
  